import React, { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Card,
  Button,
  Space,
  Input,
  Row,
  Col,
  Tabs,
  Modal,
  Form,
  DatePicker,
  Select,
  Checkbox,
  Table,
  InputNumber,
  message,
  Badge,
} from 'antd';
import {
  PlusOutlined,
  CloseOutlined,
  ExclamationCircleOutlined,
  SyncOutlined,
  SaveOutlined,
} from '@ant-design/icons';
import { FormattedMessage, useIntl,connect } from 'umi';
import moment from 'moment';
import CateComp from '@/components/CategoryComponent';
import DocHelper from '@/components/DocHelper';
import QuickMenu from '@/components/QuickMenu';
import NewGuider from '@/components/NewGuider';
import request from '@/utils/request';
import 'intro.js/introjs.css';
import 'intro.js/themes/introjs-modern.css';
import IntroJs from 'intro.js';
import QuerySelect from '@/components/QuerySelect';

const { TabPane } = Tabs;
const { confirm } = Modal;
const apiURL = '/api/services/app/OrderHed/';
const apiURLDtl = '/api/services/app/OrderDtl/';
const apiURLRel = '/api/services/app/OrderRel/';
const apiURLCust = '/api/services/app/Customers/';

const ViewPage: React.FC<any> = (props) => {
  const [data, setData] = useState<any>({ orderNum: 0, Approve: false, openOrder: false });
  const [orderDtl, setOrderDtl] = useState<any>({ orderNum: 0, orderLine: 0 });
  const [orderRel, setOrderRel] = useState<any>({ orderNum: 0, orderLine: 0, orderRelNum: 0 });
  const [loading, setLoading] = useState(false);
  const [optionCust, setOptionCust] = useState<any[]>([]);
  const [defTab, setDefTab] = useState('1');
  const [currencyCode, setCurrencyCode] = useState('CNY');
  const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([]);
  const [selectedRowKeys2, setSelectedRowKeys2] = useState<any[]>([]);
  const [orderErr, setOrderErr] = useState(0);
  const [orderDtlErr, setOrderDtlErr] = useState(0);
  const [orderRelErr, setOrderRelErr] = useState(0);
  const [orderDtls, setOrderDtls] = useState<any[]>([]);
  const [orderRels, setOrderRels] = useState([]);
  const [partRevs, setPartRevs] = useState([]);
  const [vendor,setVendor] = useState<any>();
  const formRef = useRef<any>();
  const intl = useIntl();
  const { currentUser } = props;

  useEffect(() => {
    fetchCust();
    const guider = localStorage.getItem('saleOrderGuide');
    if (!guider || guider !== 'ok') {
      startIntro();
    }
  }, []);

  const startIntro = () => {
    const intro1 = IntroJs('#root');
    intro1
      .setOptions({
        prevLabel: '上一步',
        nextLabel: '下一步',
        skipLabel: '跳过',
        doneLabel: '结束',
      })
      .oncomplete(function () {})
      .onexit(function () {
        message.success('恭喜您已经学会了！🎉 🎉 🎉  ');
        localStorage.setItem('saleOrderGuide', 'ok');
      })
      .start();
  };

  const newGuider = () => {
    localStorage.removeItem('saleOrderGuide');
    startIntro();
  };

  const onFinishFailed = (errorInfo: any) => {
    let orderErr = 0;
    let orderDtlErr = 0;
    let orderRelErr = 0;
    errorInfo.errorFields.forEach((element: any) => {
      if (element.name[0] === 'orderDtl') {
        orderDtlErr++;
      } else if (element.name[0] === 'orderRel') {
        orderRelErr++;
      } else if (element.name[0] === 'order') {
        orderErr++;
      }
      setOrderErr(orderErr);
      setOrderDtlErr(orderDtlErr);
      setOrderRelErr(orderRelErr);
    });
  };

  const onFinish = async (values: { order: any; orderDtl: any; orderRel: any }) => {
    const orderHed = values.order;
    const orderDtl = values.orderDtl;
    const orderRel = values.orderRel;
    try {
      orderHed.requestDate = orderHed?.requestDate.format('YYYY-MM-DD');
      orderHed.orderDate = orderHed?.orderDate.format('YYYY-MM-DD');
      setLoading(true);
      if (orderDtl) {
        orderDtl.requestDate = orderDtl?.requestDate.format('YYYY-MM-DD');
        if (orderDtl.qsDate) orderDtl.qsDate = orderDtl?.qsDate.format('YYYY-MM-DD');
        if (orderDtl.warrantyDate)
          orderDtl.warrantyDate = orderDtl?.warrantyDate.format('YYYY-MM-DD');
      }
      if (orderRel) {
        if (orderRel?.requestDate)
          orderRel.requestDate = orderRel?.requestDate.format('YYYY-MM-DD');
        else orderRel.requestDate = orderDtl?.requestDate.format('YYYY-MM-DD');
      }
      let flag = false;
      await request(apiURL + 'Modify', {
        method: 'POST',
        data: orderHed,
      }).then((response) => {
        if (response) {
          if (response.success) {
            flag = true;
          }
        }
      });
      if (orderDtl && orderDtl.id && flag) {
        orderDtl.orderNum = orderHed.orderNum;
        await request(apiURLDtl + 'Modify', {
          method: 'POST',
          data: [orderDtl],
        });
      }
      if (orderRel && orderRel.id && flag) {
        orderRel.orderNum = orderHed.orderNum;
        await request(apiURLRel + 'Modify', {
          method: 'POST',
          data: [orderRel],
        });
      }
      if (flag) {
        message.success(intl.formatMessage({ id: 'pages.saveSuccess' }));
        getObj(orderHed);
      }
      setLoading(false);
      setOrderErr(0);
      setOrderDtlErr(0);
      setOrderRelErr(0);
    } catch (error) {
      console.log(error);
      message.error(intl.formatMessage({ id: 'pages.operationFailed' }));
    }
  };

  const fetchCust = () => {
    setLoading(true);
    request(apiURLCust + 'GetList', {
      method: 'GET',
      params: { SkipCount: 0, MaxResultCount: 0, isActive: 1 },
    }).then((response) => {
      if (response) {
        if (response.success) {
          const items = response.result?.items;
          setOptionCust(items);
        } else {
          message.error(response.error?.message);
        }
      }
      setLoading(false);
    });
  };

  const newObj = () => {
    const value = {
      entryPerson: currentUser.userName,
    };
    formRef.current.resetFields();
    request(apiURL + 'New', {
      method: 'POST',
      data: value,
    }).then((response) => {
      if (response) {
        if (response.success) {
          message.success(intl.formatMessage({ id: 'pages.newCustomerSuccess' }));
          const order = response.result.data;
          setData(order);
          formRef.current.setFieldsValue({ order });
        } else {
          message.error(response.error.message);
        }
        setLoading(false);
      }
    });
  };

  const newDtl = () => {
    if (data.orderNum === 0) {
      message.warning(intl.formatMessage({ id: 'pages.warning' }));
      return;
    }
    const value = {
      orderNum: data.orderNum,
      partNum: '',
      lineDesc: '',
      orderQty: 1,
    };

    request(apiURLDtl + 'New', {
      method: 'POST',
      data: value,
    }).then((response) => {
      if (response) {
        setLoading(true);
        if (response.success) {
          getObj(response.result.data);
        } else {
          message.error(response.error.message);
        }
        setLoading(false);
      }
    });
  };

  const newRel = () => {
    if (orderDtl.orderNum === 0 || orderDtl.orderLine === 0) {
      message.warning(intl.formatMessage({ id: 'pages.warning' }));
      return;
    }
    const value = {
      orderNum: orderDtl.orderNum,
      orderLine: orderDtl.orderLine,
    };
    request(apiURLRel + 'New', {
      method: 'POST',
      data: value,
    }).then((response) => {
      if (response) {
        setLoading(true);
        if (response.success) {
          const data = response.result.data;
          getObj(data);
        }
        setLoading(false);
      }
    });
  };

  const delObj = () => {
    if (data.items.length > 0) {
      message.warning(intl.formatMessage({ id: 'pages.warning' }));
      return;
    }
    confirm({
      title: intl.formatMessage({ id: 'pages.warning' }),
      icon: <ExclamationCircleOutlined />,
      content: intl.formatMessage({ id: 'pages.delete.confirm' }),
      onOk() {
        props
          .dispatch({
            type: 'Abp/delBatch',
            payload: [data.id],
            control: 'OrderHed',
          })
          .then(() => {
            formRef.current.resetFields();
            setData({ orderNum: 0 });
          });
      },
    });
  };

  const delDtl = () => {
    if (!selectedRowKeys || selectedRowKeys.length <= 0) {
      message.warning(intl.formatMessage({ id: 'pages.warning' }));
      return;
    }
    for (let i = 0; i < selectedRowKeys.length; i++) {
      if (selectedRowKeys[i].items?.length > 0) {
        message.warning(intl.formatMessage({ id: 'pages.warning' }));
        return;
      }
    }
    confirm({
      title: intl.formatMessage({ id: 'pages.warning' }),
      icon: <ExclamationCircleOutlined />,
      content: intl.formatMessage({ id: 'pages.delete.confirm' }),
      onOk() {
        props
          .dispatch({
            type: 'Abp/delBatch',
            payload: selectedRowKeys,
            control: 'OrderDtl',
          })
          .then(() => {
            const lists = orderDtls.filter((o: any) => selectedRowKeys.indexOf(o.id) < 0);
            setOrderDtls(lists);
            getObj(data);
          });
      },
    });
  };

  const delRel = () => {
    if (!selectedRowKeys2 || selectedRowKeys2.length <= 0) {
      message.warning(intl.formatMessage({ id: 'pages.warning' }));
      return;
    }
    confirm({
      title: intl.formatMessage({ id: 'pages.warning' }),
      icon: <ExclamationCircleOutlined />,
      content: intl.formatMessage({ id: 'pages.delete.confirm' }),
      onOk() {
        props
          .dispatch({
            type: 'Abp/delBatch',
            payload: selectedRowKeys2,
            control: 'OrderRel',
          })
          .then(() => {
            const lists = orderRels.filter((o: any) => selectedRowKeys2.indexOf(o.id) < 0);
            setOrderRels(lists);
            getObj(data);
          });
      },
    });
  };

  const setCurrentSO = (e: any) => {
    getObj({
      orderNum: e.OrderNum,
    });
  };

  const getObj = (e: any) => {
    if (e.orderNum) {
      formRef.current.resetFields();
      setLoading(true);
      request(apiURL + 'GetByNum', {
        method: 'GET',
        params: { num: e.orderNum },
      }).then((response) => {
        if (response) {
          if (response.success) {
            if (response.result.success) {
              const orderHed = response.result.data;
              if (orderHed.orderDate) orderHed.orderDate = moment(orderHed.orderDate);
              if (orderHed.requestDate) orderHed.requestDate = moment(orderHed.requestDate);
              setData(orderHed);
              setOrderDtls(orderHed.items);
              setOrderRels(orderHed.items[0]?.items);
              formRef.current.setFieldsValue({ order: orderHed });
              if (orderHed.items && orderHed.items.length > 0) setOrderDtl(orderHed.items[0]);
              tabSwitch('1');
            } else {
              message.error(response.result.message);
            }
          } else {
            message.error(response.error.message);
          }
          setLoading(false);
        }
      });
    }
  };

  const setCurrent = (part?: any) => {
    if (part) {
      const orderDtl: any = {};
      orderDtl.partNum = part.PartNum;
      orderDtl.lineDesc = part.PartDescription;
      orderDtl.ium = part.IUM;
      formRef.current.setFieldsValue({ orderDtl });
      setPartRevs(part.Revs?.split(','));
    }
  };

  const handleSetOrderDtl = (orderDtl: any) => {
    if (orderDtl.requestDate) orderDtl.requestDate = moment(orderDtl.requestDate);
    if (orderDtl.warrantyDate) orderDtl.warrantyDate = moment(orderDtl.warrantyDate);
    if (orderDtl.qsDate) orderDtl.qsDate = moment(orderDtl.qsDate);
    formRef.current.setFieldsValue({ orderDtl });
    if (orderDtl.items && orderDtl.items.length > 0) setOrderRel(orderDtl.items[0]);
    setOrderRels(orderDtl.items);
    setOrderDtl(orderDtl);
    setDefTab('2');
  };

  const handleSetOrderRel = (orderRel: any) => {
    if (orderRel.requestDate) orderRel.requestDate = moment(orderRel.requestDate);
    formRef.current.setFieldsValue({ orderRel });
    setOrderRel(orderRel);
    setDefTab('3');
  };

  const tabSwitch = (key: any) => {
    setDefTab(key);
  };

  const onSelectChange = (selectedRowKeys: any) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  const onSelectChange2 = (selectedRowKeys2: any) => {
    setSelectedRowKeys2(selectedRowKeys2);
  };

  const CustSelChange = (e: any) => {
    const obj = optionCust.filter((o: any) => o.custNum === e)[0];
    const order: any = {};
    order.contactor = obj.contactor;
    order.phoneNum = obj.telphone ? obj.telphone : obj.mobile;
    order.currencyCode = obj.currency;
    formRef.current.setFieldsValue({ order });
  };

  const setStatusSO = (act: string = 'OpenSO') => {
    if (data.id) {
      request(apiURL + act, {
        method: 'POST',
        data: [{ id: data.id }],
      }).then((response) => {
        if (response.success) {
          getObj(data);
        }
      });
    }
  };

  const columns = [
    {
      title: <FormattedMessage id="pages.orderLine" />,
      dataIndex: 'orderLine',
      key: 'orderLine',
      width: 60,
    },
    {
      title: <FormattedMessage id="pages.openline" />,
      dataIndex: 'openLine',
      key: 'openLine',
      render: (text: boolean) => <Checkbox checked={text} />,
      width: 60,
    },
    {
      title: <FormattedMessage id="pages.partNum" />,
      dataIndex: 'partNum',
      key: 'partNum',
    },
    {
      title: <FormattedMessage id="pages.partDescription" />,
      dataIndex: 'lineDesc',
      key: 'lineDesc',
      ellipsis: true,
    },
    {
      title: <FormattedMessage id="pages.orderQty" />,
      dataIndex: 'orderQty',
      key: 'orderQty',
    },
    {
      title: <FormattedMessage id="pages.unitPrice" />,
      dataIndex: 'unitPrice',
      key: 'unitPrice',
    },
  ];

  const columnRel = [
    {
      title: <FormattedMessage id="pages.orderLine" />,
      dataIndex: 'orderLine',
      key: 'orderLine',
      width: 60,
    },
    {
      title: <FormattedMessage id="pages.orderRelNum" />,
      dataIndex: 'orderRelNum',
      key: 'orderRelNum',
      width: 60,
    },
    {
      title: <FormattedMessage id="pages.orderQty" />,
      dataIndex: 'ourReqQty',
      key: 'ourReqQty',
    },
    {
      title: <FormattedMessage id="pages.openline" />,
      dataIndex: 'openRelease',
      key: 'openRelease',
      render: (text: boolean) => <Checkbox checked={text} />,
    },
    {
      title: <FormattedMessage id="pages.requestDate" />,
      dataIndex: 'requestDate',
      key: 'requestDate',
      render: (text: any) => <span>{moment(text).format('YYYY-MM-DD')}</span>,
    },
    {
      title: <FormattedMessage id="pages.dropShip" />,
      dataIndex: 'dropShip',
      key: 'dropShip',
      render: (text: boolean) => <Checkbox checked={text} />,
    },
    {
      title: <FormattedMessage id="pages.buyToOrder" />,
      dataIndex: 'buyToOrder',
      key: 'buyToOrder',
      render: (text: boolean) => <Checkbox checked={text} />,
    },
  ];

  const selectRev = (
    <Select placeholder={<FormattedMessage id="pages.revision" />}>
      {partRevs?.map((item: any) => {
        return (
          <Select.Option key={item} value={item}>
            {item}
          </Select.Option>
        );
      })}
    </Select>
  );

  const optionItemCust = optionCust?.map((d: any) => {
    return (
      <Select.Option value={d.custNum} key={d.id}>
        {d.customerName}
      </Select.Option>
    );
  });

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const rowSelection2 = {
    selectedRowKeys2,
    onChange: onSelectChange2,
  };

  const disabled = data == null || data.orderNum == 0 || !data?.openOrder || data?.approve;

  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        ref={formRef}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Space style={{ marginBottom: 8 }}>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => newObj()}
            data-step="1"
            data-intro="跟随小O来一步步创建订单吧，首先点击这里新建订单。"
          >
            <span>
              <FormattedMessage id="pages.new" />
            </span>
          </Button>
          <Button
            type="primary"
            htmlType="submit"
            loading={loading}
            disabled={disabled}
            icon={<SaveOutlined />}
            data-step="5"
            data-intro="点击保存按钮，保存填写的订单信息。"
          >
            <span>
              <FormattedMessage id="pages.save" />
            </span>
          </Button>
          <Button type="primary" icon={<SyncOutlined />} onClick={() => getObj(data)}>
            <span>
              <FormattedMessage id="pages.refresh" />
            </span>
          </Button>
          <Button
            danger
            type="primary"
            icon={<CloseOutlined />}
            disabled={disabled}
            onClick={delObj}
          >
            <span>
              <FormattedMessage id="pages.delete" />
            </span>
          </Button>
          <QuickMenu
            path="/saleorder/orderEntry"
            icon="icon-briefcase"
            title="pages.OrderEntry"
            dataStep="8"
            dataIntro="Tips: 您还可以收藏此菜单功能至欢迎页快捷入口。感谢您的观看，谢谢！"
          />
          <NewGuider callback={() => newGuider()} />
          <DocHelper page="gncidv" />
        </Space>
        <Row gutter={16}>
          <Col xs={24} sm={24} md={24} lg={10} xl={10}>
            <Card>
              <Tabs defaultActiveKey={defTab} activeKey={defTab} onChange={tabSwitch}>
                <TabPane
                  tab={
                    <Badge count={orderErr}>
                      <FormattedMessage id="pages.summary" />
                    </Badge>
                  }
                  key="1"
                >
                  <Form.Item wrapperCol={{ offset: 6 }} style={{ marginBottom: 0 }}>
                    <Input.Group compact>
                      <Form.Item name={['order', 'openOrder']} valuePropName="checked">
                        <Checkbox onChange={() => setStatusSO()}>
                          <FormattedMessage id="pages.openline" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['order', 'approve']} valuePropName="checked">
                        <Checkbox onChange={() => setStatusSO('ApprvSO')}>
                          <FormattedMessage id="pages.approve" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['order', 'voidOrder']} valuePropName="checked">
                        <Checkbox onChange={() => setStatusSO('VoidSO')}>
                          <FormattedMessage id="pages.invalid" />
                        </Checkbox>
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item name={['order', 'id']} label="ID" hidden>
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label={<FormattedMessage id="pages.orderNum" />}
                    style={{ marginBottom: 0 }}
                    required
                  >
                    <Input.Group compact>
                      <Form.Item name={['order', 'orderNum']}>
                        <Input />
                      </Form.Item>
                      <Form.Item noStyle>
                        <QuerySelect
                          width={780}
                          sysReportName="SoSearch"
                          text={<FormattedMessage id="pages.select" />}
                          title={<FormattedMessage id="pages.orderNum" />}
                          btntype="primary"
                          setCurrent={setCurrentSO}
                          scroll={{ x: 'max-content', y: '200px' }}
                          search={{
                            filterType: 'light',
                          }}
                        />
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item
                    name={['order', 'custNum']}
                    label={<FormattedMessage id="pages.customer" />}
                  >
                    <Select
                      style={{ width: 240 }}
                      showSearch
                      placeholder={intl.formatMessage({id: 'pages.select.customer'})}
                      filterOption={(input, option: any) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                      onChange={CustSelChange}
                      data-step="2"
                      data-intro="选择销售订单对应的客户。"
                    >
                      {optionItemCust}
                    </Select>
                  </Form.Item>
                  <CateComp
                    layout="currency"
                    width={200}
                    name={['order', 'currencyCode']}
                    label={<FormattedMessage id="pages.currencyCode" />}
                    callback={(item: any) => setCurrencyCode(item.categoryIndex)}
                  />
                  <CateComp
                    layout="ShipVia"
                    width={200}
                    name={['order', 'shipViaCode']}
                    label={<FormattedMessage id="pages.shipViaCode" />}
                  />
                  <Form.Item
                    name={['order', 'orderDate']}
                    label={<FormattedMessage id="pages.orderDate" />}
                    rules={[{ required: true }]}
                    data-step="3"
                    data-intro="填写订单日期。"
                  >
                    <DatePicker />
                  </Form.Item>
                  <Form.Item
                    name={['order', 'requestDate']}
                    label={<FormattedMessage id="pages.requestDate" />}
                    rules={[{ required: true }]}
                    data-step="4"
                    data-intro="填写需求日期，以及下面的联系人、联系方式。"
                  >
                    <DatePicker />
                  </Form.Item>

                  <Form.Item
                    name={['order', 'contactor']}
                    label={<FormattedMessage id="pages.contactor" />}
                    rules={[
                      { required: true, message: <FormattedMessage id="pages.contactor.required" /> },
                    ]}
                  >
                    <Input style={{ width: 200 }} />
                  </Form.Item>
                  <Form.Item
                    name={['order', 'phoneNum']}
                    label={<FormattedMessage id="pages.telphone" />}
                    rules={[
                      { required: true, message: <FormattedMessage id="pages.telphone.required" /> },
                    ]}
                  >
                    <Input style={{ width: 200 }} />
                  </Form.Item>
                </TabPane>
                <TabPane
                  tab={
                    <Badge count={orderDtlErr}>
                      <FormattedMessage id="pages.orderLine" />
                    </Badge>
                  }
                  key="2"
                >
                  <Form.Item name={['orderDtl', 'id']} hidden={true}>
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label={<FormattedMessage id="pages.orderLine"  />}
                    style={{ marginBottom: 0 }}
                  >
                    <Input.Group compact>
                      <Form.Item name={['orderDtl', 'orderLine']}>
                        <InputNumber disabled />
                      </Form.Item>
                      <Form.Item name={['orderDtl', 'openLine']} valuePropName="checked">
                        <Checkbox style={{ marginLeft: 8 }}>
                          <FormattedMessage id="pages.openline" />
                        </Checkbox>
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item
                    label={<FormattedMessage id="pages.partNum" />}
                    style={{ marginBottom: 0 }}
                    required
                  >
                    <Input.Group compact>
                      <Form.Item
                        noStyle
                        name={['orderDtl', 'partNum']}
                        rules={[
                          { required: true, message: <FormattedMessage id="pages.partNum.required" /> },
                        ]}
                      >
                        <Input style={{ width: 120 }} disabled />
                      </Form.Item>
                      <Form.Item noStyle>
                        <QuerySelect
                          width={680}
                          sysReportName="PartSearch"
                          text={<FormattedMessage id="pages.select" />}
                          title={<FormattedMessage id="pages.partNum" />}
                          btntype="primary"
                          setCurrent={setCurrent}
                          scroll={{ x: 'max-content', y: '200px' }}
                          params={{ InActive: 'false' }}
                        />
                      </Form.Item>
                      <Form.Item name={['orderDtl', 'revisionNum']}>{selectRev}</Form.Item>
                    </Input.Group>
                  </Form.Item>

                  <Form.Item
                    name={['orderDtl', 'lineDesc']}
                    label={<FormattedMessage id="pages.partDescription" />}
                  >
                    <Input.TextArea readOnly disabled />
                  </Form.Item>
                  <Form.Item
                    name={['orderDtl', 'unitPrice']}
                    label={<FormattedMessage id="pages.unitPrice" />}
                    rules={[{ required: true }]}
                  >
                    <InputNumber min={0} />
                  </Form.Item>
                  <Form.Item
                    label={<FormattedMessage id="pages.orderQty" />}
                    style={{ marginBottom: 0 }}
                  >
                    <Input.Group compact>
                      <Form.Item name={['orderDtl', 'orderQty']}>
                        <InputNumber min={0} />
                      </Form.Item>
                      <Form.Item name={['orderDtl', 'ium']}>
                        <Input placeholder="IUM" style={{ width: 60 }} disabled />
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item name={['orderDtl', 'discount']} label={intl.formatMessage({id: 'pages.discount'})}>
                    <InputNumber min={0} />
                  </Form.Item>
                  <Form.Item
                    name={['orderDtl', 'requestDate']}
                    label={<FormattedMessage id="pages.requestDate" />}
                    rules={[{ required: true, message: '请选择需求日期' }]}
                  >
                    <DatePicker />
                  </Form.Item>
                  <Form.Item
                    name={['orderDtl', 'warrantyDate']}
                    label={<FormattedMessage id="pages.warrantyDate" />}
                  >
                    <DatePicker />
                  </Form.Item>
                  <Form.Item
                    name={['orderDtl', 'qsDate']}
                    label={<FormattedMessage id="pages.QSDate" />}
                  >
                    <DatePicker />
                  </Form.Item>
                  <Form.Item
                    name={['orderDtl', 'custPartNum']}
                    label={<FormattedMessage id="pages.CustomerPartNum" />}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name={['orderDtl', 'custPartDesc']}
                    label={<FormattedMessage id="pages.CustomerPartDesc" />}
                  >
                    <Input />
                  </Form.Item>
                </TabPane>
                <TabPane
                  tab={
                    <Badge count={orderRelErr}>
                      <FormattedMessage id="pages.orderRelNum" />
                    </Badge>
                  }
                  key="3"
                >
                  <Form.Item name={['orderRel', 'id']} hidden={true}>
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label={<FormattedMessage id="pages.orderLine" />}
                    name={['orderRel', 'orderLine']}
                  >
                    <InputNumber disabled />
                  </Form.Item>
                  <Form.Item
                    label={
                      <FormattedMessage
                        id="pages.orderRelNum"
                      />
                    }
                    name={['orderRel', 'orderRelNum']}
                  >
                    <InputNumber disabled />
                  </Form.Item>
                  <Form.Item
                    name={['orderRel', 'ourReqQty']}
                    label={<FormattedMessage id="pages.orderQty" />}
                  >
                    <InputNumber min={1} />
                  </Form.Item>
                  <Form.Item
                    name={['orderRel', 'requestDate']}
                    label={<FormattedMessage id="pages.requestDate" />}
                    rules={[{ required: true }]}
                  >
                    <DatePicker />
                  </Form.Item>
                  <CateComp
                    layout="ShipVia"
                    width={200}
                    name={['orderRel', 'shipViaCode']}
                    label={<FormattedMessage id="pages.shipViaCode" />}
                  />
                  <Form.Item wrapperCol={{ offset: 5 }} style={{ marginBottom: '0px' }}>
                    <Input.Group compact>
                      <Form.Item name={['orderRel', 'openRelease']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.openline" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['orderRel', 'buyToOrder']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.buyToOrder" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['orderRel', 'dropShip']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.dropShip" />
                        </Checkbox>
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                </TabPane>
                <TabPane tab={<FormattedMessage id="pages.otherInfo" />} key="4">
                  <CateComp
                    layout="Invoice.Header"
                    width={240}
                    name={['order', 'userChar2']}
                    label={<FormattedMessage id="pages.Invoice.Header" />}
                    callback={(e: any) => setVendor({ vendor: e })}
                  />
                  <Form.Item
                    name={['order', 'projectNum']}
                    label={<FormattedMessage id="pages.projectNum" />}
                  >
                    <Input style={{ width: 200 }} />
                  </Form.Item>
                  <Form.Item
                    name={['order', 'poNum']}
                    label={<FormattedMessage id="pages.customerPONum" />}
                  >
                    <Input style={{ width: 200 }} />
                  </Form.Item>
                  <Form.Item
                    name={['order', 'userChar1']}
                    label={<FormattedMessage id="pages.endCustomer" />}
                  >
                    <Input style={{ width: 200 }} />
                  </Form.Item>
                  <Form.Item
                    name={['order', 'emailAddress']}
                    label={<FormattedMessage id="pages.email" />}
                  >
                    <Input style={{ width: 200 }} />
                  </Form.Item>
                  <Form.Item
                    name={['order', 'address']}
                    label={<FormattedMessage id="pages.address" />}
                  >
                    <Input.TextArea />
                  </Form.Item>
                </TabPane>
                <TabPane tab={<FormattedMessage id="pages.orderComment" />} key="5">
                  <Form.Item name={['order', 'orderComment']}>
                    <Input.TextArea rows={10} />
                  </Form.Item>
                </TabPane>
              </Tabs>
            </Card>
          </Col>
          <Col xs={24} sm={24} md={24} lg={14} xl={14}>
            <Card
              style={{ marginBottom: 16 }}
              title={<FormattedMessage id="pages.orderLine" />}
              extra={[
                <Space key="S1">
                  <Button
                    type="dashed"
                    icon={<PlusOutlined />}
                    onClick={newDtl}
                    data-step="6"
                    data-intro="添加销售订单分录。"
                    disabled={disabled}
                  >
                    <span>
                      <FormattedMessage id="pages.create" />
                    </span>
                  </Button>
                  <Button
                    danger
                    type="primary"
                    icon={<CloseOutlined />}
                    onClick={delDtl}
                    disabled={disabled}
                  >
                    <span>
                      <FormattedMessage id="pages.delete" />
                    </span>
                  </Button>
                </Space>,
              ]}
            >
              <Table
                rowKey="id"
                size="small"
                columns={columns}
                dataSource={orderDtls}
                onRow={(record) => {
                  return {
                    onClick: () => {
                      handleSetOrderDtl(record);
                    },
                  };
                }}
                rowSelection={rowSelection}
              />
            </Card>
            <Card
              title={<FormattedMessage id="pages.orderRelNum" />}
              extra={[
                <Space key="S2">
                  <Button
                    type="dashed"
                    icon={<PlusOutlined />}
                    onClick={newRel}
                    data-step="7"
                    data-intro="添加销售订单发货项。"
                    disabled={disabled}
                  >
                    <span>
                      <FormattedMessage id="pages.create" />
                    </span>
                  </Button>
                  <Button
                    danger
                    type="primary"
                    icon={<CloseOutlined />}
                    onClick={delRel}
                    disabled={disabled}
                  >
                    <span>
                      <FormattedMessage id="pages.delete" />
                    </span>
                  </Button>
                </Space>,
              ]}
            >
              <Table
                rowKey="id"
                size="small"
                columns={columnRel}
                dataSource={orderRels}
                onRow={(record) => {
                  return {
                    onClick: () => {
                      handleSetOrderRel(record);
                    },
                  };
                }}
                rowSelection={rowSelection2}
              />
            </Card>
          </Col>
        </Row>
      </Form>
    </PageHeaderWrapper>
  );
};

export default connect(({ user }: { user: any }) => ({
  currentUser: user.currentUser,
}))(ViewPage);
